<template>
	<div class="echarts-box">
		<div id="lineEcharts" :style="{ width: '100%', height: '300px' }"></div>
	</div>
</template>


<script setup>
	import * as echarts from "echarts";
	import {
		onMounted,
		onUnmounted,
		reactive
	} from 'vue';

	let data = reactive([1, 0, 11, 10, 2, 22, 9, 1, 1, 0, 1, 4, 1, 2, 1, 3, 18, 4, 1, 0])

	/// 声明定义一下echart
	let echart = echarts;

	onMounted(() => {
		let arr = []
		for (let i = 0; i <= data.length; i++) {
			arr.push({
				value: data[i],
				itemStyle: {
					color: Colors()
				}
			})
		}
		initChart(arr);
	});

	onUnmounted(() => {
		echart.dispose;
	});

	//颜色对象
	function Colors() {
		let r = Math.floor(Math.random() * 255);
		let g = Math.floor(Math.random() * 255);
		let b = Math.floor(Math.random() * 255);
		let color = 'rgb(' + r + ',' + g + ',' + b + ')';
		return color
	}

	// 基础配置一下Echarts
	function initChart(arr) {
		let chart = echart.init(document.getElementById("lineEcharts"));
		let option = {
			color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
			tooltip: {
				trigger: 'axis',
				extraCssText: 'width:135px;height:60px;',
				axisPointer: {
					// Use axis to trigger tooltip
					type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
				}
			},
			toolbox: {
				show: false,
				feature: {
					saveAsImage: {}
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				axisLabel: {
					color: '#000',
					rotate: 45,
				},
				axisLine: {
					lineStyle: {
						color: '#000'
					}
				},
				data: ['安徽省', '澳门', '北京市', '福建省', '甘肃省', '广东省', '广西省', '贵州省', '海南省', '海外', '河北省', '河南省', '黑龙江',
					'湖北省', '湖南省', '吉林省', '江苏省', '江西省', '辽宁省', '内蒙古'
				]
			}],
			yAxis: {
				type: 'value',
				name: '客户数量',
				nameGap: 30,
				nameTextStyle: {
					fontWeight: 'bolder',
					color: '#000'
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: '#000'
					}
				}
			},
			dataZoom: [{
					type: 'inside',
					show: true,
					// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
					start: 0,
					// 数据窗口范围的结束百分比。范围是：0 ~ 100。
					end: 100,
					// zoomOnMouseWheel: 'ctrl',
					// 第一个 dataZoom 组件
					xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
				},

			],
			series: [{

					type: 'line',
					smooth: true,
					lineStyle: {
						width: 2,
						color: 'rgb(232,86,71)'
					},
					label: {
						show: true,
						position: 'top'
					},
					areaStyle: {
						opacity: 0.8,
						color: 'rgb(238,129,118)'
					},

					emphasis: {
						focus: 'series'
					},
					data: arr,

				},

			]
		};
		// 把配置和数据放这里
		chart.setOption(option);
		window.onresize = function() {
			//自适应大小
			chart.resize();
		};
	}
</script>

<style scoped>

</style>